<template>
  <div class="paginator">
    <ul class='paginator-list'>
      <li class="text-ob-bright" v-if="currentPage > 1" @click="pageChangeEmitter(currentPage - 1)">
        <el-icon><DArrowLeft /></el-icon>
      </li>
      <li
        v-if="paginator.head !== 0"
        :class="{ active: currentPage === paginator.head }"
        @click="pageChangeEmitter(paginator.head)">
        {{ paginator.head }}
      </li>
      <li
        v-for="(page, key) in paginator.pages"
        :key="key"
        :class="{ active: currentPage === page }"
        @click="pageChangeEmitter(page)">
        {{ page }}
      </li>
      <li
        v-if="paginator.end !== 0"
        :class="{ active: currentPage === paginator.end }"
        @click="pageChangeEmitter(paginator.end)">
        {{ paginator.end }}
      </li>
      <li class="text-ob-bright" v-if="currentPage < pages" @click="pageChangeEmitter(currentPage + 1)">
<!--        {{ t('settings.paginator.older') }}-->
<!--        <svg-icon icon-class="arrow-right" />-->
        <el-icon><DArrowRight /></el-icon>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, toRefs } from 'vue'
import { useI18n } from 'vue-i18n'
import SvgIcon from '@/components/SvgIcon/index.vue'
import { DArrowLeft, DArrowRight } from '@element-plus/icons-vue'

export default defineComponent({
  name: 'Paginator',
  components: { DArrowLeft, DArrowRight, SvgIcon },
  emits: ['pageChange'],
  props: ['pageTotal', 'pageSize', 'page'],
  setup(props, { emit }) {
    const { t } = useI18n()
    const pagination = toRefs(props)
    const pages = computed(() => {
      return Math.ceil(pagination.pageTotal.value / pagination.pageSize.value)
    })
    const paginator = computed(() => {
      if (pages.value <= 3) {
        const pageNumbers = []
        for (let i = 0; i < pages.value; i++) {
          pageNumbers.push(i + 1)
        }
        return {
          head: 0,
          pages: pageNumbers,
          end: 0
        }
      } else if (pagination.page.value >= 1 && pagination.page.value < 3) {
        return {
          head: 1,
          pages: [2, 3, '...'],
          end: pages.value
        }
      } else if (pagination.page.value >= 3 && pagination.page.value <= pages.value - 2) {
        return {
          head: 1,
          pages: ['...', pagination.page.value - 1, pagination.page.value, pagination.page.value + 1, '...'],
          end: pages.value
        }
      } else {
        return {
          head: 1,
          pages: ['...', pages.value - 2, pages.value - 1],
          end: pages.value
        }
      }
    })
    const pageChangeEmitter = (page: number | string) => {
      if (page === '...') return
      emit('pageChange', page)
    }
    return {
      currentPage: computed(() => {
        return pagination.page.value
      }),
      pageChangeEmitter,
      paginator,
      pages,
      t
    }
  }
})
</script>

<style lang="scss" scoped>
.paginator {
  @apply flex flex-row justify-center my-8;
  ul {
    @apply flex flex-row flex-wrap gap-1.5;
    li {
      @apply flex flex-row items-center uppercase font-extrabold cursor-pointer mr-2;
      &:hover {
        opacity: 0.5;
      }
      svg {
        @apply font-extrabold text-ob; //mx-2
      }
    }
  }
  .active {
    color: #FFFFFF;
  }
}
.paginator-list li{
  width: 2.5em;
  height: 2.5em;
  border-radius: 8px;
  box-shadow: var(--page-shadow-border);
  background: var(--paginator-bg);
  margin: 0 0.3rem;
  border: 1px solid var(--paginator-border);
  text-align: center;
  justify-content: center;
}
.paginator-list li.active{
  background: linear-gradient(135deg,rgb(var(--color-rgb) / .8),rgb(var(--color-sub-rgb) / .8));
}
</style>
